<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TodoList --- vue</title>
    <link rel="stylesheet" href="./css/todolist.css">
</head>

<body>
    <h3><span>TodoList</span></h3>
    <!-- vue根实例 -->
    <div id="app" v-cloak>
        <!-- -------------------------------输入栏-------------------------------------- -->
        <div id="title">
            <!-- 用span模仿全选框checkbox 点击事件模仿checkbox勾选操作-->
            <span id="check-all" @click="selectAll(allChoose)" :class="{select:allChoose}"></span>
            <!-- 事项输入框 双向绑定了数据cur，绑定了enter按下事件：添加事项；ctrl+enter按下事件：撤销删除-->
            <input type="text" placeholder="write something..." v-model="cur" @keyup.enter="addItem" @keyup.ctrl.enter="recallItem">
        </div>
        <!-- -------------------------------输入栏-------------------------------------- -->
        <!-- -------------------------------内容区-------------------------------------- -->
        <ul id="content">
            <!-- 事项列表没有数据时显示的内容 -->
            <li v-show="!itemExist">
                <span class="zero"></span>
            </li>
            <!-- 循环渲染事项items  渲染某一个事项的条件v-if 必须满足，该事项未被删除：isDel属性不为true且该事项的完成状态done与当前tab栏选择：currentList（0表示显示未完成事项|1表示显示已完成|2表示两者都显示）一致 -->
            <li v-for="item in items" v-if="!item.isDel&&(item.done==currentList||currentList==2)">
                <!-- 用span模仿checkbox 带有点击事件，实现勾选效果 -->
                <span class="checkbox" @click="toggleItem(item.id)"><i :class="{select:item.done}"></i></span>
                <!-- 事项显示区域 双击事件：修改事项的内容 -->
                <span class="text" @dblclick="setText(item.id,true)">
                    <!-- 做修改操作的input框 v-if切换到修改状态即modiState匹配了某一个id时，渲染该input-->
                    <input type="text" class="modiInput" v-if="item.id===modiState" v-model="item.content" @blur="setText(modiState,false)" @keyup.enter="setText(modiState,false)" v-select>
                    <!-- 当modiState不匹配任何id，等于-1时，渲染该区域，直接显示事项的数据 -->
                    <i v-text="item.content" :class="{done:item.done}" v-if="item.id!==modiState"></i>
                    <!-- 删除按钮 -->
                <span class="del" @click="removeItem(item.id)">x</span></span>
            </li>
        </ul>
        <!-- -------------------------------内容区-------------------------------------- -->
        <!-- -------------------------------tab栏切换---------------------------------- -->
        <div id="tabs">
            <!-- 显示剩余未完成事项，用itemExit计算属性实现 -->
            <span style="cursor: default;"><i v-text="itemExist"></i>items Left</span>
            <!-- tab栏切换，点击时切换currentList指向的tab栏 -->
            <span :class="{select:currentList===2}" @click="changeList(2)">All Lists</span>
            <span :class="{select:currentList===0}" @click="changeList(0)">Todo Lists</span>
            <span :class="{select:currentList===1}" @click="changeList(1)">Done Lists</span>
        </div>
        <!-- -------------------------------tab栏切换---------------------------------- -->
    </div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/todolist.js"></script>

</html>